<template>
	<view class="scoringIndex">
		<u-navbar title="评分指标" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="questions" ref="init" :style="{
			paddingBottom: '120rpx'
		}">
			<view class="question-list" v-for="q in questionList" :key="q.index">
				<view class="question-title" :id="`q${q.index}`">
					<text class="index">{{ q.index }}</text>
					<u-tag text="单选" mode="dark" bg-color="#00A1F2" color="#FFFFFF" style="display: flex; width: 84rpx; height: 40rpx;" />
					<text class="content">{{ q.name }} <text style="color: red">*</text></text>
				</view>
				<u-cell-group :border="true">
					<u-cell-item v-for="(item,index) in q.list" :key="index" @click="onChange(q, index)" :border-top="true" :value="`${item.score}分`" :title="item.name" 
						:title-style="{ fontSize: '32rpx', color: '#666', paddingLeft: '24rpx', flexBasis: '80%' }"
						:value-style="{ fontSize: '32rpx', color: '#666' }" :arrow="false">
						<template #icon>
							<image class="radioStyle" v-show="item.status" :src="activeIcon" mode=""></image>
							<image class="radioStyle" v-show="!item.status" :src="defaultIcon" mode=""></image>
						</template>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		
		<view class="coin-btn">
			<u-button type="default" @click="onSubmit" :disabled="btnDisable" shape="circle" :custom-style="startBtn">提交评测</u-button>
		</view>
	</view>
</template>

<script>
import questions from '../common/js/questions.js'
import deepClone from '../common/js/deep-clone.js'
export default {
	data() {
		return {
			questionList: deepClone(questions),
			startBtn: {
				lineHeight: '96rpx',
				background: '#00A1F2 !important',
				color: '#FFFFFF',
				fontSize: '36rpx'
			},
			defaultIcon: require('../static/radio_default.png'),
			activeIcon: require('../static/radio_active.png'),
			btnDisable: false,
		};
	},
	methods: {
		onChange(q, index) {
			q.list.forEach((item, i) => {
				if(index == i) {
					item.status = true
				} else {
					item.status = false
				}
			})
			this.$forceUpdate()
		},
		onSubmit() {
			let questionList = this.questionList
			let countScore = 0 // 总分
			let emptyObj = {
				index: '',
				status: false // 是否有为空的
			}
			for(let i = 0; i < questionList.length; i++) {
				let isEmpty = true
				const list = questionList[i].list
				list.forEach(child => {
					if(child.status) {
						isEmpty = false
						countScore += child.score
					}
				})
				if(isEmpty) {
					emptyObj.index = questionList[i].index,
					emptyObj.status = true
					break
				}
			}
			if(emptyObj.status) {
				uni.showToast({
				    title: '您还有题目未答完',
				    icon: 'none',
				    duration: 3000,
				});
				let scrollTop = 0
				const query = uni.createSelectorQuery().in(this);
				let dom1 = 0
				query.select(`#q01`).boundingClientRect(data => {
				  dom1 = data.top
				}).exec()
				query.select(`#q${emptyObj.index}`).boundingClientRect(data => {
				  scrollTop = data.top - dom1
				  var timer = setTimeout(() =>{
				  	uni.pageScrollTo({
				  		duration:0,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
				  		scrollTop: scrollTop,//滚动到目标位置
				  	})
				  	clearTimeout(timer)
				  },100)
				}).exec()
				
				return
			}
			
			this.questionList = questions
			this.$u.route({
				type: 'redirectTo',
				url: '/pages/result',
				params: {
					score: countScore
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
.question-list {
	padding-bottom: 32rpx;
	/deep/.u-cell:before {
		position: absolute;
		top: 0;
		left: 32rpx;
		content: ' ';
		height: 2rpx;
		width: 686rpx;
		background: #E7E7E7;
	}
}
.scoringIndex {
	background: #F7F7F7;
}
.question-title {
	background-color: #fff;
	padding: 48rpx 32rpx;
	display: flex;
	align-items: center;
	.index {
		font-size: 48rpx;
		color: #000;
		font-weight: 600;
		padding-right: 24rpx;
	}
	.content {
		padding-left: 6rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	/deep/.u-tag {
		padding: 12rpx !important;
	}
}
.radioStyle {
	width: 48rpx;
	height: 48rpx;
}
.coin-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24rpx 32rpx;
	border-top: 2rpx solid #E6E6E6;
	background-color: #FFFFFF;
	.recharge_coin {
		line-height: 96rpx;
		background: #FF7B02 !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		&[disabled] {
			background: #CCCCCC !important;
			color: #FCFCFC;
		}
	}
}
</style>
